<div class="products_carousel">
	<div class="title">
	   <?php 
	       $escaper = new Zend\Escaper\Escaper('utf-8');
	   
	       echo $escaper->escapeHtml($this->title); 
	   ?>
	</div>

	<div class="pagination_button previous"></div>
	<div id="itemContainer">
        <?php
            echo $this->headScript()->prependFile($this->basePath() . '/js/jPages.min.js', 'text/javascript');
            echo $this->headLink()->appendStylesheet($this->basePath() . '/css/jPages.css');
            
            for ($i = 0; $i < count($this->products); $i += 5) {
                $name = $this->products[$i + 1]->getText();
                $imageUrl = $this->products[$i + 2]->getUrl();
                $price = $this->products[$i + 3]->getValue();
                $currency = $this->products[$i + 3]->getCurrency();
                $alias = $this->products[$i + 4]->getText();
                
                echo sprintf('<div class="item"><a href="%s"><img src="%s"/></a><div class="description"><div class="name">%s</div><div class="price">%s</div></div></div>', 
                    $this->url('catalog/product', array('product_alias' => $alias, 'action' => 'detail', 'controller' => 'product'), array(), true),
                    $escaper->escapeHtmlAttr($imageUrl), $escaper->escapeHtml($name), 
                    $escaper->escapeHtml(sprintf($this->fromPrice, $this->currencyFormat($price, $currency, $this->locale))));
            }
        ?>
    </div>
	<div class="pagination_button next"></div>
    <div class="holder"></div>
</div>

<script type="text/javascript">
    $("div.holder").jPages({
        containerID : "itemContainer",
        perPage      : 3,
        previous    : ".products_carousel .previous",
        next        : ".products_carousel .next",
    });
</script>